<template>
    <p style="white-space: pre-line;"></p>
    <el-card v-if="information" style="max-width: 100%"> <!-- 使用 v-if 检查 information 是否已定义 -->
        <template #header>
            <div class="card-header">
                <div style="font-size: xx-large;">{{ information.title }}</div>
            </div>
        </template>
        <el-main>
            <p>{{ information.intro }}</p>
        </el-main>
        <div style="margin: 20px 0"></div>
        <el-footer>
            <el-button type="primary" size="large" plain @click="goToWeb">点击查看原网页</el-button>
        </el-footer>
    </el-card>
    <p v-if="message">{{ message }}</p> <!-- 显示错误信息 -->
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import axios from 'axios';

const router = useRouter();
const id = ref('');
const information = ref(null); // 初始化为 null 而不是空对象
const message = ref(''); // 使用 ref 使其成为响应式的

const goToWeb = () => {
    if (information.value && information.value.url) {
        window.open(information.value.url, '_blank');
    }
};

onMounted(() => {
    console.log(router.currentRoute.value.params.id);
    id.value = router.currentRoute.value.params.id; // 获取路由参数中的 id 值
    axios.post('http://localhost:80/index.php/index/getAllBaidubaikeDataById', { id: id.value })
        .then(response => {
            console.log("userwaitdata的请求状态：" + response.data);
            console.log("userwaitdata请求到的数据：");
            console.log(response.data.data);
            if (response.data.data && response.data.data.length > 0) {
                information.value = response.data.data[0]; // 取数组中的第一个对象
            } else {
                message.value = 'No data found';
            }
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            message.value = 'Error: ' + error.message; // 更新响应式变量的值
        });
});
</script>
